API قفل بیدار ماندن صفحه (Screen Wake Lock): جلوگیری از به خواب رفتن صفحه در برنامه‌های وب

Screen Wake Lock API یک وب API است که به برنامه‌های وب اجازه می‌دهد از کم‌نور شدن یا قفل شدن صفحه دستگاه جلوگیری کنند. این ویژگی به‌ویژه برای برنامه‌هایی که نیاز به نمایش مداوم صفحه دارند، مانند پخش‌کننده‌های رسانه، برنامه‌های ناوبری و برنامه‌هایی که به تعامل طولانی‌مدت کاربر نیاز دارند، مفید است.

چرا قفل بیدار ماندن صفحه (Screen Wake Lock) مهم است؟

در دنیای امروز، کاربران انتظار تجربیات یکپارچه و روان را دارند. دستگاهی که به‌طور خودکار صفحه را کم‌نور یا قفل می‌کند، می‌تواند این تجربیات را مختل کند، به‌خصوص زمانی که کاربران به‌طور فعال با یک برنامه وب درگیر هستند. این سناریوها را در نظر بگیرید:

• پخش ویدیو: تصور کنید در حال تماشای یک فیلم یا دنبال کردن یک آموزش آشپزی هستید و صفحه مدام کم‌نور می‌شود و شما را مجبور می‌کند برای روشن نگه داشتن آن، صفحه را لمس کنید. این یک تجربه خسته‌کننده است.
• برنامه‌های ناوبری: هنگام رانندگی و استفاده از یک برنامه ناوبری، صفحه باید برای ارائه مسیرهای مداوم روشن بماند. کم‌نور شدن یا قفل شدن صفحه می‌تواند منجر به از دست دادن پیچ‌ها و خطرات بالقوه ایمنی شود.
• برنامه‌های ارائه مطلب: ارائه اسلایدها یا نمایش اطلاعات مهم مستلزم این است که صفحه در طول ارائه فعال بماند.
• برنامه‌های بازی: بسیاری از بازی‌ها برای گیم‌پلی به دید مداوم صفحه نیاز دارند. به خواب رفتن صفحه می‌تواند تجربه بازی را مختل کند.
• وایتبوردهای آنلاین: کار مشترک روی یک وایتبورد آنلاین مستلزم بیدار ماندن صفحه است تا کاربران مجبور نباشند برای تعامل مجدد، مکرراً صفحه را لمس کنند.

Screen Wake Lock API راه‌حلی برای این مشکلات ارائه می‌دهد و به برنامه‌های وب اجازه می‌دهد تا وضعیت روشن/خاموش صفحه را کنترل کرده و تجربه‌ای یکپارچه‌تر و کاربرپسندتر ارائه دهند.

پشتیبانی مرورگرها

تا اواخر سال ۲۰۲۴، Screen Wake Lock API از پشتیبانی خوبی در مرورگرهای اصلی برخوردار است. با این حال، همیشه بررسی آخرین اطلاعات سازگاری مرورگرها در منابعی مانند شبکه توسعه‌دهندگان موزیلا (MDN) و Can I use برای اطمینان از سازگاری بهینه بین مرورگرها بسیار مهم است. پشتیبانی مرورگرها می‌تواند بسته به نسخه مرورگر و سیستم‌عامل متفاوت باشد.

استفاده از Screen Wake Lock API

استفاده از Screen Wake Lock API نسبتاً ساده است. در اینجا خلاصه‌ای از مراحل کلیدی آورده شده است:

۱. بررسی پشتیبانی از API

قبل از تلاش برای استفاده از API، ضروری است که بررسی کنید آیا مرورگر کاربر از آن پشتیبانی می‌کند یا خیر. این کار از بروز خطا در مرورگرهایی که این API را پیاده‌سازی نکرده‌اند، جلوگیری می‌کند.

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API supported
} else {
  // Screen Wake Lock API not supported
  console.log('Screen Wake Lock API is not supported by this browser.');
}

            

              
                Copy
              
            
          

۲. درخواست قفل بیدار ماندن

برای درخواست قفل بیدار ماندن، از متد navigator.wakeLock.request() استفاده کنید. این متد یک Promise را برمی‌گرداند که در صورت موفقیت‌آمیز بودن درخواست، با یک شیء WakeLockSentinel حل می‌شود. شیء WakeLockSentinel نماینده قفل بیدار ماندن فعال است.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen wake lock active!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock was released');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Call this function to activate the wake lock
requestWakeLock();

            

              
                Copy
              
            
          

در این مثال، تابع requestWakeLock() تلاش می‌کند تا یک قفل بیدار ماندن صفحه را به دست آورد. آرگومان 'screen' مشخص می‌کند که ما می‌خواهیم از کم‌نور شدن یا قفل شدن صفحه جلوگیری کنیم. اگر درخواست موفقیت‌آمیز باشد، پیامی در کنسول ثبت می‌شود. این کد همچنین شامل یک کنترل‌کننده خطا برای مدیریت هرگونه استثنایی است که ممکن است در حین درخواست قفل رخ دهد. نکته مهم این است که کد یک event listener برای رویداد "release" اضافه می‌کند که نشان‌دهنده زمانی است که قفل دیگر فعال نیست. این اتفاق ممکن است در صورتی رخ دهد که کاربر به صراحت قفل را آزاد کرده باشد یا سیستم به دلیل اقدامات صرفه‌جویی در مصرف انرژی آن را پس گرفته باشد.

۳. آزاد کردن قفل بیدار ماندن

بسیار مهم است که قفل بیدار ماندن را زمانی که دیگر نیازی به آن نیست، آزاد کنید. عدم انجام این کار می‌تواند باتری دستگاه را خالی کرده و بر تجربه کاربری تأثیر منفی بگذارد. برای آزاد کردن قفل، متد release() را روی شیء WakeLockSentinel فراخوانی کنید.

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen wake lock released!');
  }
};

// Call this function to release the wake lock
releaseWakeLock();

            

              
                Copy
              
            
          

این تابع به طور ایمن قفل بیدار ماندن را آزاد کرده و متغیر wakeLock را به null تنظیم می‌کند. ضروری است که اطمینان حاصل شود متغیر wakeLock به درستی مدیریت می‌شود تا از بروز خطا هنگام آزاد کردن قفل جلوگیری شود.

۴. مدیریت رویدادهای آزاد شدن قفل بیدار ماندن

سیستم ممکن است به دلایل مختلفی مانند عدم فعالیت کاربر یا کم بودن باتری، قفل بیدار ماندن را آزاد کند. مهم است که به رویداد release روی شیء WakeLockSentinel گوش دهید تا این موقعیت‌ها را به درستی مدیریت کنید. این به شما امکان می‌دهد تا قفل را مجدداً درخواست کنید یا اقدامات مناسب دیگری انجام دهید.

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock was released');
  // Attempt to re-request the wake lock
  // or take other appropriate actions
  requestWakeLock(); // For example re-requesting the wakelock
});

            

              
                Copy
              
            
          

این مثال نشان می‌دهد که چگونه به رویداد release گوش داده و به طور بالقوه قفل بیدار ماندن را مجدداً درخواست کنید. پیاده‌سازی واقعی به نیازمندی‌های خاص برنامه شما بستگی دارد.

بهترین شیوه‌ها و ملاحظات

در حالی که Screen Wake Lock API یک ابزار قدرتمند است، استفاده مسئولانه از آن و در نظر گرفتن بهترین شیوه‌های زیر ضروری است:

• فقط در مواقع ضروری قفل را درخواست کنید: از به دست آوردن غیرضروری قفل بیدار ماندن خودداری کنید، زیرا می‌تواند باتری دستگاه را خالی کند. فقط زمانی قفل را درخواست کنید که دید مداوم صفحه برای تجربه کاربری واقعاً ضروری باشد.
• قفل‌ها را به سرعت آزاد کنید: به محض اینکه دیگر نیازی به قفل بیدار ماندن نیست، آن را آزاد کنید. این به صرفه‌جویی در مصرف باتری و جلوگیری از تخلیه غیرضروری آن کمک می‌کند.
• رویدادهای آزاد شدن را به درستی مدیریت کنید: برای آزاد شدن غیرمنتظره قفل توسط سیستم آماده باشید. به رویداد release گوش دهید و اقدامات مناسبی مانند درخواست مجدد قفل یا اطلاع‌رسانی به کاربر انجام دهید.
• کنترل‌های کاربری فراهم کنید: در نظر بگیرید که به کاربران کنترل‌هایی برای فعال یا غیرفعال کردن ویژگی قفل بیدار ماندن ارائه دهید. این به کاربران کنترل بیشتری بر مصرف انرژی دستگاهشان می‌دهد و به آنها اجازه می‌دهد رفتار برنامه را سفارشی کنند. به عنوان مثال، یک پخش‌کننده رسانه می‌تواند یک دکمه «روشن نگه داشتن صفحه» داشته باشد.
• عمر باتری را در نظر بگیرید: به تأثیر آن بر عمر باتری توجه داشته باشید. روشن نگه داشتن مداوم صفحه می‌تواند عمر باتری را به میزان قابل توجهی کاهش دهد، به خصوص در دستگاه‌های تلفن همراه. به کاربران در مورد تأثیر بالقوه آن اطلاع دهید و گزینه‌هایی برای کاهش آن فراهم کنید.
• مجوز کاربر: در حالی که خود API مستقیماً از کاربر اجازه نمی‌خواهد، بهتر است به کاربر اطلاع دهید که برنامه از به خواب رفتن صفحه جلوگیری می‌کند و به او اجازه دهید این رفتار را غیرفعال کند.
• مکانیسم جایگزین (Fallback): برای مرورگرهایی که از این API پشتیبانی نمی‌کنند، یک مکانیسم جایگزین پیاده‌سازی کنید. این می‌تواند شامل استفاده از جاوا اسکریپت برای ارسال دوره‌ای رویدادهای ساختگی به صفحه برای جلوگیری از کم‌نور شدن یا قفل شدن آن باشد. با این حال، توجه داشته باشید که این رویکرد می‌تواند کمتر قابل اعتماد و منابع‌برتر از استفاده از Screen Wake Lock API باشد.
• آزمایش: برنامه خود را به طور کامل روی دستگاه‌ها و مرورگرهای مختلف آزمایش کنید تا مطمئن شوید که Screen Wake Lock API همانطور که انتظار می‌رود کار می‌کند. به مصرف باتری و تجربه کاربری توجه ویژه داشته باشید.
• دسترسی‌پذیری (Accessibility): آگاه باشید که همیشه روشن نگه داشتن صفحه ممکن است برای برخی از کاربران مشکل‌ساز باشد. فراهم کردن راه‌هایی برای غیرفعال کردن قفل بیدار ماندن صفحه، برنامه شما را در دسترس‌تر می‌کند.

نمونه‌های واقعی

در اینجا چند نمونه واقعی از نحوه استفاده از Screen Wake Lock API در برنامه‌های مختلف آورده شده است:

• پخش‌کننده‌های رسانه: یک برنامه پخش ویدیو می‌تواند از Screen Wake Lock API برای جلوگیری از کم‌نور شدن صفحه در حین پخش استفاده کند و یک تجربه تماشای یکپارچه را فراهم کند.
• برنامه‌های ناوبری: یک برنامه ناوبری می‌تواند از این API برای روشن نگه داشتن صفحه در حین رانندگی کاربر استفاده کند تا اطمینان حاصل شود که مسیرها همیشه قابل مشاهده هستند.
• برنامه‌های ارائه مطلب: یک برنامه ارائه مطلب می‌تواند از این API برای جلوگیری از کم‌نور شدن صفحه در حین ارائه استفاده کند تا اطمینان حاصل شود که مخاطبان همیشه می‌توانند اسلایدها را ببینند.
• برنامه‌های تناسب اندام: یک برنامه تناسب اندام که یک جلسه تمرینی را ردیابی می‌کند، می‌تواند صفحه را روشن نگه دارد تا کاربران بتوانند به سرعت معیارها را بدون نیاز به باز کردن قفل دستگاه خود مشاهده کنند.
• برنامه‌های دستور پخت: یک برنامه دستور پخت می‌تواند از این API برای روشن نگه داشتن صفحه در حالی که کاربر در حال دنبال کردن یک دستور پخت است، استفاده کند و از کم‌نور شدن صفحه در حین آشپزی جلوگیری کند.
• برنامه‌های کیوسک: برنامه‌های کیوسک از این ویژگی بهره‌مند می‌شوند. به عنوان مثال، کیوسک‌های سلف‌سرویس در فرودگاه‌ها یا رستوران‌ها می‌توانند از Screen Wake Lock API برای اطمینان از فعال و پاسخگو ماندن صفحه به تعاملات کاربر استفاده کنند.
• برنامه‌های پزشکی از راه دور (Telemedicine): در طول ویزیت‌های مجازی پزشک، به‌ویژه آنهایی که نیاز به مشاهده دارند، می‌توان از Screen Wake Lock API برای اطمینان از روشن ماندن صفحه در طول مشاوره استفاده کرد.

مثال کد: پخش‌کننده رسانه با Screen Wake Lock

این مثال نحوه پیاده‌سازی Screen Wake Lock API را در یک برنامه پخش‌کننده رسانه ساده نشان می‌دهد.

            
<!DOCTYPE html>
<html>
<head>
  <title>Media Player with Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <button id="wakeLockBtn">Enable Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Screen wake lock active!');
        wakeLockBtn.textContent = 'Disable Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock was released');
          wakeLockBtn.textContent = 'Enable Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Screen wake lock released!');
        wakeLockBtn.textContent = 'Enable Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Optional: Automatically request wake lock when video starts playing
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

این کد یک پخش‌کننده رسانه ساده با یک دکمه برای فعال یا غیرفعال کردن قفل بیدار ماندن صفحه ایجاد می‌کند. وقتی دکمه کلیک می‌شود، کد یا یک قفل جدید درخواست می‌کند یا قفل موجود را آزاد می‌کند. متن دکمه برای انعکاس وضعیت فعلی قفل به‌روز می‌شود. این مثال همچنین شامل یک event listener اختیاری است که به طور خودکار هنگام شروع پخش ویدیو، قفل را درخواست می‌کند. توجه: your-video.mp4 را با مسیر واقعی فایل ویدیوی خود جایگزین کنید.

ملاحظات امنیتی

Screen Wake Lock API با در نظر گرفتن امنیت طراحی شده است. مرورگرها اقدامات امنیتی مختلفی را برای جلوگیری از سوء استفاده از این API پیاده‌سازی می‌کنند. به عنوان مثال، مرورگرها ممکن است مدت زمانی را که یک قفل می‌تواند نگه داشته شود محدود کنند یا قبل از اعطای قفل، به تعامل کاربر نیاز داشته باشند. همیشه بهترین شیوه‌های ذکر شده در این مقاله را دنبال کنید تا اطمینان حاصل کنید که از API به طور مسئولانه و اخلاقی استفاده می‌کنید.

جایگزین‌های Screen Wake Lock API

قبل از Screen Wake Lock API، توسعه‌دهندگان اغلب از «ترفندهایی» برای جلوگیری از به خواب رفتن صفحه استفاده می‌کردند. این روش‌ها به طور کلی غیرقابل اعتماد بوده و توصیه نمی‌شوند.

• عنصر ویدیوی بی‌اثر (No-Op): قرار دادن یک عنصر ویدیوی کوچک و بی‌صدا در صفحه و پخش مداوم آن. این کار سیستم را فریب می‌دهد تا فکر کند رسانه‌ای در حال پخش است و در نتیجه از به خواب رفتن جلوگیری می‌کند. این روش بسیار منابع‌بر است.
• درخواست‌های ساختگی AJAX: ارسال دوره‌ای درخواست‌های AJAX به سرور برای «فعال» نگه داشتن دستگاه. این یک جایگزین ضعیف است، زیرا به شبکه وابسته و غیرقابل اعتماد است.

این روش‌ها توصیه نمی‌شوند، زیرا غیرقابل اعتماد هستند و می‌توانند بر عملکرد و عمر باتری تأثیر منفی بگذارند. Screen Wake Lock API راه‌حل توصیه شده برای جلوگیری از به خواب رفتن صفحه در برنامه‌های وب است.

نتیجه‌گیری

Screen Wake Lock API یک ابزار ارزشمند برای توسعه‌دهندگان وب است که می‌خواهند تجربیات کاربری یکپارچه و جذابی ایجاد کنند. با جلوگیری از کم‌نور شدن یا قفل شدن صفحه دستگاه‌ها، می‌توانید اطمینان حاصل کنید که برنامه‌های شما حتی در دوره‌های طولانی عدم فعالیت، قابل مشاهده و پاسخگو باقی می‌مانند. به یاد داشته باشید که از این API به طور مسئولانه استفاده کنید و بهترین شیوه‌های ذکر شده در این مقاله را دنبال کنید تا از تخلیه باتری دستگاه و تأثیر منفی بر تجربه کاربری جلوگیری کنید. با گسترش پذیرش این API، بدون شک به بخشی ضروری از ابزارهای توسعه وب تبدیل خواهد شد. از قدرت Screen Wake Lock API برای ارتقاء برنامه‌های وب خود و ارائه تجربه‌ای لذت‌بخش‌تر برای کاربران خود در سراسر جهان استفاده کنید.